<template>
    <div class="messageItem">
        <div :class="[message.isread == 0 ? 'noRead' : 'card']">
            <div class="me-article-header">
                <div>
                    <div style="display:flex;align-item:center;">
                        <div class="face">
                            <img :src="message.founderface" alt="" style="cursor: pointer;"
                                @click="$router.push('/userInfo/' + message.founderid)">
                        </div>

                        <div class="me-article-title" v-if="message.type == 1">
                            <span @click="$router.push('/userInfo/' + message.founderid)" style="cursor: pointer;">{{
                                message.foundername
                            }}</span>&nbsp;&nbsp;收藏了您的&nbsp;&nbsp;<span
                                @click="$router.push('/article/' + message.articleid)" style="cursor: pointer;">
                                {{ message.title }}
                            </span>
                        </div>
                        <div class="me-article-title" v-else>
                            <span @click="$router.push('/userInfo/' + message.founderid)" style="cursor: pointer;">{{
                                message.foundername
                            }}</span>&nbsp;&nbsp;评论或回复了您&nbsp;&nbsp;
                        </div>
                    </div>
                    <div v-if="message.type == 2" style="font-size: 13px;margin:10px;cursor: pointer;" @click="$router.push('/article/' + message.articleid)">
                        {{ message.intro }}
                    </div>
                </div>

                <div style="font-size: 12px;color:gray;margin-right:20px">
                    {{ message.createdate | format }}
                </div>
            </div>

            <div :class="[message.isread == 0 ? 'noReadContent' : 'me-artile-description']" style="cursor: pointer;"
                @click="$router.push('/article/' + message.articleid)">
                {{ message.content }}
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'messageitem',
    props: {
        message: Object
    },
    data() {
        return {

        }
    },
    methods: {
        view(id) {
            this.$router.push(`/article/${id}`)
        },
        randomRgb() {
            var str = ['#70af7e', '#50b3b3', '#30c59b', '#66acd8', '#e18283', '#f5a379', '#3dd2e2', '#82c77b',
                '#d6c06e'
            ];
            let t = str[Math.floor(Math.random() * str.length)];
            return {
                color: `${t} !important`,
            };
        },
    }
}
</script>

<style scoped="scoped">
body {
    font-size: 20px;
}

.messageItem {
    display: flex;
    justify-content: flex-start;
    margin: 10px 20px;
    flex: 1;
}

.card {
    width: 100%;
    border: none;
    border-bottom: 1px solid #ecedf2;
    box-shadow: none;
    padding: 10px;
}

.noRead {
    width: 100%;
    border: none;
    border-bottom: 1px solid #ecedf2;
    box-shadow: none;
    padding: 10px;
    background: rgb(236, 245, 253);
}

.face img {
    height: 40px;
    width: 40px;
    border-radius: 50%;
}

.me-article-title {
    text-decoration: none;
    font-size: 13px;
    line-height: 22px;
    color: #000;
    display: flex;
    align-items: center;
}

.face {
    margin: 5px 15px 5px 0;
}

.me-article-header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.viewcount {
    font-size: 12px;
    margin: 5px 0;
    margin-right: 20px;
}

.card:hover {
    background: rgb(232, 232, 232) !important;
}

b {
    color: rgb(16, 42, 75);
    width: 300px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.me-artile-description {
    background: #f2f2f2;
    overflow: hidden;
    height: 50px;
    line-height: 50px;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 800px;
    margin: 10px 0;
    padding: 0 20px;
    font-size: 14px;
}

.noReadContent {
    background: #f4f2f2;
    overflow: hidden;
    height: 50px;
    line-height: 50px;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 800px;
    margin: 10px 0;
    padding: 0 20px;
    font-size: 14px;
}

.me-article-count {
    font-size: 12px;
    color: rgb(133, 133, 133);
    display: flex;
    flex-direction: row;
    align-items: center;
}

.store {
    font-size: 13px;
    color: rgb(119, 118, 118);
}</style>
